<template>
  <div id="left-nav">
    <el-row>
      <el-card shadow="always" body-style="padding:10px">
        <el-image src="http://resource.teemor.xyz/1585203262055"></el-image>
        <!-- <h4 style="text-align:center">BLOG-V3.0</h4> -->
      </el-card>
    </el-row>
    <el-row class="mt-10">
      <el-card shadow="always">
        <div slot="header" class="clearfix">
          <i class="el-icon-user-solid" style="color:red;"></i>
          <b>ME</b>
        </div>
        <ul>
          <li>
            <i class="el-icon-message" style="color:green;"></i>
            <label>zhoulk97@foxmail.com</label>
          </li>
          <li>
            <i class="el-icon-location" style="color:blue;"></i>
            <label>四川/成都</label>
          </li>
          <li>
            <i class="el-icon-paperclip" style="color:red;"></i>
            <el-link href="https://gitee.com/teemor_z/projects" target="#" :underline="false">
              <img src="../assets/logo_gitee_light.svg" height="30px" />
            </el-link>
          </li>
        </ul>
      </el-card>
    </el-row>
    <el-row class="mt-10">
      <el-card shadow="always">
        <div slot="header" class="clearfix">
          <i class="el-icon-s-data" style="color:red;"></i>
          <b>网站总览</b>
        </div>
        <ul>
          <li>
            <i class="el-icon-notebook-2" style="color:red;"></i>
            <label>文章总数：</label>
            <span>{{baseInfo.articleNum}}</span>
          </li>
          <li>
            <i class="el-icon-bicycle" style="color:green;"></i>
            <label>访问总数：</label>
            <span>{{baseInfo.browserNum}}</span>
          </li>
          <li>
            <i class="el-icon-loading" style="color:blue;"></i>
            <label>运行天数：</label>
            <span>{{baseInfo.runDays}}</span>
          </li>
        </ul>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import { getBaseInfo } from "@/api/commonApis";
export default {
  name: "left",
  data() {
    return {
      baseInfo: {
        articleNum: 64,
        browserNum: 128,
        runDays: 256
      }
    };
  },
  mounted() {
    getBaseInfo().then(res => {
      this.baseInfo = res.data;
    });
  }
};
</script>

<style>
#left-nav ul {
  list-style: none !important;
  margin: 0px;
}
#left-nav ul span,
#left-nav ul label {
  font-size: 12px;
  color: #737088;
}
.el-card__body {
  padding: 10px !important;
}

#left-nav li {
  line-height: 25px !important;
}

#left-nav i {
  margin-right: 10px;
}
</style>